<style scoped>
.question-cell {
	padding-top: 10px;
}
.input-item {
    display: inline-block;
    margin-left: 45px;
    width: 250px;
    height: 84px;
}

.input-item2 {
    display: inline-block;
    margin-left: 45px;
    width: 275px;
}

.formitem {
    margin-left: 30px;
}
.avatar {
    height: 84px;
    width: 84px;
    display: block;
}
.avatar-uploader-icon {
    font-size: 36px;
    color: #8c939d;
    width: 84px;
    height: 84px;
    line-height: 84px;
    text-align: center;
    float: left;
    position: relative;
    border: 1px dashed #d9d9d9;
    background: #e5e5e5;
}
</style>
<template>
	<div class="question-cell">
		<Form ref="formData" :model="formValidate"  inline>
            
            <FormItem label="视频封面" :label-width="100" prop="url" :rules="ruleValidate" v-if="type==='video'">
                <div class="input-item">
                    <img v-if="poster" :src="'https://evp.51job.com/51job/api/51miniadmin/' + poster" class="avatar" @click="handleImageClick">
                    <i v-else class="img-border el-icon-plus avatar-uploader-icon" @click="handleImageClick">+</i>
                    <div class="up-file" style="display:none">
                        <form>
                            <input :class="inputClass" accept="image/*" name="upimage" type="file" @change="uploadImage($event)" style="display:none"/>
                        </form>
                    </div>
                </div>
			</FormItem>
            <FormItem label="视频链接" :label-width="100" prop="url" v-if="type==='video'">
                <div class="input-item">
                    <Input class="input-item" placeholder="视频完整链接,必须是mp4格式" :type="'textarea'" :rows="4" @on-blur="checkVideo" v-model="video"></Input>
                </div>
            </FormItem>
            <FormItem label="图片内容" :label-width="100" prop="url" :rules="ruleValidate" v-else>
                <div class="input-item">
                    <img v-if="url" :src="'https://evp.51job.com/51job/api/51miniadmin/' + url" class="avatar" @click="handleImageClick">
                    <i v-else class="img-border el-icon-plus avatar-uploader-icon" @click="handleImageClick">+</i>
                    <div class="up-file" style="display:none">
                        <form>
                            <input :class="inputClass" accept="image/*" name="upimage" type="file" @change="uploadImage($event)" style="display:none"/>
                        </form>
                    </div>
                </div>
			</FormItem>
		</Form>
	</div>
</template>
<script>
export default {
    props: {
        type: String,
        url: String,
        poster: String
    },
    data() {
        return {
            formValidate: {
                fullUrl: '',
                url: '',
                poster: '',
            },
            video: '',
            inputClass: '111',
            ruleValidate: {
            	url: [{
                    required: true,
                    message: '地址不能为空',
                    trigger: 'blur'
                }],
            },
        }
    },
	mounted() {
        if(this.type === 'video') {
            this.video = this.url
        }
        this.inputClass = this.randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ')
    },
    watch: {
        url: function(){
            if(this.type === 'video') {
                this.video = this.url
            }
        }
    },
    methods: {
        randomString(length, chars) {
            var result = '';
            for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
            return result;
        },
        handleImageClick() {
            $("." + this.inputClass).click();
        },
        checkVideo() {
            if(!this.video.endsWith('.mp4')) {
                this.$Message.error('视频链接格式错误')
            } else {
                this.$emit('update:url', this.video)
            }
        },
        uploadImage(e) {

            var self = this;
            var file = e.target.files[0];
            var filesize = file.size;
            var filename = file.name;

            if (filesize > 2101440) {
                self.$Message.error("图片超过2m");
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                var imgcode = e.target.result;
                self.imageData = imgcode;
                $.ajax({
                    url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=companyswiper",
                    data: {
                        file: self.imageData
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(data) {
                        // console.log(data);
                        if(self.type === "video") {
                            self.$emit('update:poster', data.url)
                        } else {
                            self.$emit('update:url', data.url)
                        }
                    }
                });
            };
        },
    }
};
</script>
